<template>
	<view>
		<view class="ml30 mt30 mr30 flex" v-for="(item,index) in dataList" :key="index" @click="toDetail(item)">
			<!-- 头像 -->
			<image :src="item.shop.avatar" class="w70 h70 radius70 mr20"></image>
			<!-- 右边 -->
			<view class="flex1 pb20 u-border-bottom">
				<!-- 上面 -->
				<view class="flex row-between mb20">
					<text class="fs28">{{item.shop.name}}</text>
					<text class="fs24 color9">{{item.create_time}}</text>
				</view>
				<!-- 中间 -->
				<view class="fs28 mb20">{{item.name}}</view>
				<view class="flex commentimgBox row-between flex-wrap mb20">
					<image :src="i" v-for="(i,j) in item.images" :key="j+'a'" :class="['radius16 mb20',item.images.length==1?'onePic':'',
					item.images.length==2?'twoPic':'',
					item.images.length==3?'threePic':'',
					item.images.length==4?'fourPic':'',
					item.images.length>=5?'threePic':'',]" mode="aspectFill" @click.stop="previewImage(j,item)"></image>
				</view>
				<view class="flex row-right color9 fs24">
					<view class="mr50">
						<text class="cuIcon-attention"></text>
						<text>{{item.browse}}</text>
					</view>
					<view class="mr50">
						<text>评论</text>
						<text>{{item.comment}}</text>
					</view>
					<view class="">
						<u-icon name="thumb-up" v-if="item.is_give == 0"></u-icon>
						<u-icon name="thumb-up-fill" v-else color="#D23030"></u-icon>
						<text>{{item.give}}</text>
					</view>
				</view>
			</view>
		</view>
		<view v-show="dataList.length == 0" class="text-center pt200">暂无数据</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				dataList: [],
				page: 1
			};
		},
		onLoad(option) {
			this.id = option.id
			uni.setNavigationBarTitle({
				title: option.title
			})
			this.getData()
		},
		methods: {
			toDetail (item) {
				uni.navigateTo({
					url: '/pages/friend/detail?id='+item.id
				})
			},
			getData (cd) {
				this.$api.circle({category_id: this.id, page: this.page, size: 10}).then(res => {
					cd?this.dataList=[...this.dataList,...res.data] : this.dataList = res.data
				})
			},
			//朋友圈图片预览
			previewImage(j,item) {
				uni.previewImage({
					current:j,
					urls:item.images.map(i=>i)
				})
			}
		},
		onReachBottom() {
			this.page++
			this.getData('cd')
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
.commentimgBox {
		
	}
.editimg {
	position: fixed;
	right: 30rpx;
	bottom: 200rpx;
}
.onePic {
	width: 100%;
	height: 380rpx !important;
}
.twoPic{
	width: 47% !important;
	height: 300rpx !important;
	margin-right: 0 !important;
}
.threePic {
	width: 30%;
	height: 180rpx !important;
}
.fourPic {
	width: 48%;
	height: 300rpx !important;
	margin-right: 0!important;
}
</style>
